<template>
  <div id="Cover">    
    <img class="preview cover_img" :src="baseURL+bgPrURL">
    <div 
      class="motto-con motto-con-home" 
      v-if="section==='home'"
    >
      <p class="motto" ref="motto">{{ motto }}<br>
        <span class="motto-ref" v-show="!isPhone">{{ `【${this.mottoRef}】` }}</span>
        <p class="motto-ref" v-show="isPhone">
          <span class="un_change">【</span>{{mottoRef}}<span class="un_change">】</span>
        </p>
      </p>
    </div>
    <div 
      class="motto-con" 
      v-else-if="section==='article'"
    >
      <p class="aritcle">{{ articleTitle }}</p>
      <p class="article-info">{{ `${formatDate(articleDate)}・` }} 
        <span style="color:#ff5400">{{articleClassify === 1 ? '日常' : '技术'}}</span>
      </p>
    </div>
    <div class="motto-con" v-else-if="section==='about'">
      <img 
        :src="`${baseURL}/files/img/ren.png`" 
        alt="人" 
        class="about_logo"
      >
      <p class="about_title" v-html="title"></p>
    </div>
    <p class="title" v-else-if="section==='search'">{{ `包含关键字 ${findWord} 的文章` }}</p>
    <p class="title" v-else v-html="title"></p>
  </div>
</template>

<script>
// import { ElNotification } from 'element-plus'
export default {
  name: 'Cover',
  props: {
    section: {
      type: String, 
      required: true
    },
    bgURL: {
      type: String, 
      required: true
    },
    bgPrURL: {
      type: String, 
      required: true
    },
    articleTitle: {
      type: String,
      default: ''
    },
    articleDate: {
      type: String,
      default: ''
    },
    articleClassify: {
      type: String,
      default: ''
    },
    findWord:{
      type: String,
      default: ''
    }
  },
  data(){
    return{
      motto: '',
      mottoRef: '',
      formatMottoRef: '',
      isPhone: false
    }
  },
  computed:{
    title(){
      switch(this.section){
        case "classify1":
          return '日&emsp;常'
        case "classify2":
          return '技&emsp;术'
        case "link":
          return '友&emsp;链'
        case "about":
          return '無&emsp;夢'
        case "motto":
          return '慧海拾珠'
        case "movie":
          return '流年光影'
        case "profile":
          return '账号信息修改'
        case "search":
          return ''
      }
    }
  },
  mounted(){    
    if(this.section === 'home'){
      this.getTodayMotto()
    }    
    if(this.section.includes('classify') === false){
      this.prLoadImg()
    }
    this.setHeight()
    this.clientWidth()        
  },
  updated(){
    this.prLoadImg()
  },
  methods: {
    // 预加载大图
    prLoadImg(){
      let image = new Image()
      let coverImg = document.getElementsByClassName('cover_img')[0]
      let originURL = this.baseURL+this.bgURL
      // console.log("bigImg:", this.bgURL);
      image.addEventListener("load", () => {
        coverImg.src = originURL
        coverImg.classList.remove('preview')
        coverImg.classList.add('origin')
      })
      image.src = originURL
    },
    setHeight(){
      let cover = document.getElementById('Cover')
      cover.setAttribute('style', `height:${document.body.clientHeight}px`)
    },
    // 监听屏幕尺寸
    clientWidth(){
      this.setWritingMode()
      window.onresize = () => {
        this.setWritingMode()
      }
    },
    // 屏幕宽度小于等于600时，设置竖体排版样式
    setWritingMode(){
      if(document.body.clientWidth <= 600){
        // alert(navigator.userAgent)
        this.isPhone = true
        $('.motto-con').addClass('motto-con-flex')
        let sUserAgent = navigator.userAgent.toLowerCase()
        let isSafariBrowser = /safari/.test(sUserAgent) && !/chrome/.test(sUserAgent)
        let isBaiduBrowser = /baidu/.test(sUserAgent)
        let isQQBrowser = /mqqbrowser/.test(sUserAgent)
        let isXiaomiBrowser = /xiaomi/.test(sUserAgent)
        let isWXBrowser = /micromessenger/.test(sUserAgent)
        if(isSafariBrowser || isBaiduBrowser){
          // is safari or baidu browser
          $('.un_change').addClass('rotate180')
        }else{
          $('.un_change').addClass('rotate90')
        }

        if(isQQBrowser || isXiaomiBrowser || isWXBrowser){
          // QQ和小米浏览器似乎不支持flex的align-items
          $('.motto-con-home').removeClass('motto-con-flex')
          $('.un_change').addClass('rotate90')
        }

        if(isWXBrowser || isSafariBrowser){
          // 微信浏览器
          // ElNotification({
          //   title: 'BrowserInfo',
          //   message: sUserAgent,
          //   type: 'info',
          //   duration: 10000
          // })
          if (sUserAgent.indexOf('android') > -1 || sUserAgent.indexOf('linux') > -1) {
            $('.un_change').addClass('rotate90')
          } else if (sUserAgent.indexOf('iphone') > -1) {
            $('.un_change').addClass('rotate180')
          }
        }
      }else{
        this.isPhone = false
      }
    },
    // 获取每日经典
    async getTodayMotto(){
      let {data} = await this.$axios({
        method: 'post',
        url: '/todaymotto'
      })

      if(data.code){
        return this.$message.error(data.msg)
      }

      this.motto = data.data.motto
      this.mottoRef = data.data.mottoRef

      this.setWritingMode()
    },
    //处理时间格式
    formatDate(val) {
      let date = new Date(val),
        YY = date.getFullYear(),
        MM = date.getMonth() + 1,
        DD = date.getDate(),
        hh = date.getHours(),
        mm = date.getMinutes(),
        ss = date.getSeconds()

      hh < 10 && (hh = '0' + hh)
      mm < 10 && (mm = '0' + mm)
      ss < 10 && (ss = '0' + ss)

      return `${YY} 年 ${MM} 月 ${DD} 日`
    }
  }
}
</script>

<style lang="less" scoped>
#Cover {
  position: relative;
  display: table;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  img{
    position: absolute;
    display: block;
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    border: 0 none;
    object-fit: cover;
    &.preview {
      filter: blur(2vw);
      transform: scale(1.05);
    }
    &.origin {
      position: absolute;
      left: 0;
      top: 0;
      animation: origin .5s ease-out;
    }
    
    @keyframes origin {
      0% {
        // transform: scale(1.05);
        opacity: 0;
      }
      100% {
        // transform: scale(1);
        opacity: 1;
      }
    }
  }

  /* 文本相对于背景图居中 */
  .motto-con, .title{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 2.5rem;
    font-weight: 300;
  }  
  .motto-con{
    width: 60vw;
    .about_logo{
      position: relative;
      text-align: center;
      display: inline-block;
      width: 10rem;
      height: 10rem;
      cursor: pointer;
      transition: 1s;
      &:hover{
        -webkit-filter: drop-shadow(0px 0px 7px rgb(91, 138, 180));
        filter: drop-shadow(0px 0px 7px rgb(91, 138, 180));
      }
    }
    .about_title{
      font-size: 2.5rem;
      color: #333;
      letter-spacing: 0.2em;
    }
    .aritcle{
      position: relative;
      text-align: center;
      display: inline-block;      
    }
    .article-info{
      margin-top: 5px;
      font-size: 1.4rem;
    }
    .motto{
      position: relative;
      text-align: left;
      display: inline-block;
      line-break: anywhere;
      .motto-ref{
        position: absolute;
        right: 0px;
        margin-top: 5px;
        font-size: 1.4rem;
      }      
    }    
  }
  
  .title{
    letter-spacing: 5px;
  }
}
/* 很小的设备（手机等，小于 600px） */
@media only screen and (max-width: 600px) { 
  #Cover{
    .motto-con{
      width: 100vw;
      height: 60vh;      
      .motto{
        writing-mode: vertical-rl;
        .motto-ref{
          position: relative;
          text-align: right;
          bottom: 0;
          margin-top: 0px;
          .un_change{
            display: inline-block;
            writing-mode: initial;
            -webkit-writing-mode: initial;
            -o-writing-mode: initial;
            -moz-writing-mode: initial;
            -ms-writing-mode: initial;
          }
          .rotate90{
            transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
          }
          .rotate180{
            transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
          }
        }
      }
    }
    .motto-con-flex{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>